<template>
	<view class="splash-container">
		<!-- 背景渐变层（柔和色调，贴合情绪主题） -->
		<view class="splash-bg"></view>
		
		<!-- 内容层（居中展示Logo、名称、Slogan） -->
		<view class="splash-content">
			<!-- Logo（声波图标，强化声音属性，替换为你的实际Logo路径） -->
			<image class="splash-logo" src="/static/moodLogo.png" mode="widthFix"></image>
			
			<!-- APP名称（艺术字风格，突出品牌） -->
			<view class="splash-name">声绪</view>
			
			<!-- Slogan（传递核心价值，轻量级文字） -->
			<view class="splash-slogan">用声音，匹配此刻的你</view>
			
			<!-- 加载指示器（告诉用户正在准备，避免卡顿感知） -->
			<view class="splash-loading" v-if="showLoading">
				<view class="loading-dot"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showLoading: true, // 是否显示加载动画
				redirectDelay: 2000 // 启动页停留时间（2秒，可调整）
			};
		},
		onLoad() {
			// 启动页停留指定时间后，自动跳转至「情绪/场景选择页」
			setTimeout(() => {
				this.showLoading = false; // 隐藏加载动画
				// 跳转页面（替换为你的选择页路径，如"/pages/mood-select/mood-select"）
				uni.navigateTo({
					url: "/pages/MoodSelect/moodSelect",
					fail: (err) => {
						// 异常处理：若跳转失败，提示用户并手动跳转
						uni.showToast({
							title: "启动失败，点击重试",
							icon: "none",
							duration: 2000,
							success: () => {
								uni.switchTab({ url: "/pages/MoodSelect/moodSelect" });
							}
						});
					}
				});
			}, this.redirectDelay);
		},
		methods: {}
	};
</script>

<style scoped>
	/* 启动页容器：全屏占满，固定定位避免滚动 */
	.splash-container {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}

	/* 背景渐变：淡紫+浅蓝，柔和且贴合情绪主题 */
	.splash-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(135deg, #e6e6fa 0%, #f0f8ff 100%);
	}

	/* 内容层：垂直居中，z-index高于背景 */
	.splash-content {
		position: relative;
		z-index: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		padding: 20rpx;
	}

	/* Logo样式：控制大小，添加轻微缩放动画 */
	.splash-logo {
		width: 240rpx;
		height: auto;
	}

	/* Logo缩放动画：从略小到正常，增强呼吸感 */
	@keyframes logoScale {
		0% {
			transform: scale(0.9);
			opacity: 0.7;
		}
		100% {
			transform: scale(1);
			opacity: 1;
		}
	}

	/* APP名称：字体加粗，大小适中，颜色偏深（突出识别） */
	.splash-name {
		font-size: 60rpx;
		font-weight: 700;
		color: #333366; /* 深紫色，与背景呼应 */
		margin-bottom: 20rpx;
		animation: nameFade 1.2s ease-in;
	}

	/* 名称淡入动画：避免突然出现 */
	@keyframes nameFade {
		0% {
			opacity: 0;
			transform: translateY(10rpx);
		}
		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* Slogan：小字轻量，颜色柔和，与名称区分层级 */
	.splash-slogan {
		font-size: 28rpx;
		color: #666699; /* 浅紫色，不抢焦点 */
		margin-bottom: 80rpx;
		animation: sloganFade 1.5s ease-in;
	}

	/* Slogan延迟淡入，增强层次感 */
	@keyframes sloganFade {
		0% {
			opacity: 0;
		}
		50% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}

	/* 加载指示器：小圆圈旋转，提示加载状态 */
	.splash-loading {
		width: 40rpx;
		height: 40rpx;
	}

	.loading-dot {
		width: 40rpx;
		height: 40rpx;
		border: 4rpx solid rgba(102, 102, 153, 0.3); /* 浅紫边框 */
		border-top-color: #333366; /* 深紫顶部，旋转时显动态 */
		border-radius: 50%;
		animation: loadingRotate 1s linear infinite;
	}

	/* 加载旋转动画 */
	@keyframes loadingRotate {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}
</style>